<template>
  <div class="picture-img">
    <img :src="imageUrl" :width="width" :height="height" :alt="url" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Picture",
  props: {
    url: {
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default: 50,
    },
    height: {
      type: Number,
      default: 50,
    },
  },
  //计算属性
  computed: {
    //state:他是咱们大仓库中的state
    ...mapState({
      fileDomain: (state) => state.fileupload.fileDomain,
    }),
    imageUrl() {
      let imgUrl = this.url;
      if (imgUrl.substring(0, 1) !== "/") {
        imgUrl = "/" + imgUrl;
      }
      return this.fileDomain + imgUrl;
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped>
.picture-img {
  border: none;
  outline: none;
}
</style>